<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!--引入Axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

    <style>
        body {
            background: url("image/4.png") no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
        }
    </style>

</head>

<body>
    <div id="app">

        <div>
            <el-card style="width: 800px; margin: 100px auto; background-color: rgba(255, 255, 255, 0.5)">
                <el-form label-width="80px">
                    <div style="display: flex; justify-content: center;">
                        <h3 style="font-size: 30px;">注册用户</h3>
                    </div>
                    <el-form-item label="用户名">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="确认密码">
                        <el-input type="password" v-model="checkpassword"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="身份">
                        <el-select v-model="form.nick" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <div style="display: flex; justify-content: center;">
                        <el-button type="primary" round @click="signup()">注册</el-button>
                    </div>

                </el-form>
            </el-card>

        </div>


    </div>
</body>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                checkpassword: "",
                form: {
                    username: "",
                    password: "",
                    nick: "1",
                    email: "",
                    phone: "",
                },
                options: [{
                    value: '1',
                    label: '老师'
                }, {
                    value: '2',
                    label: '管理员'
                }],
                value: '1'
            }
        },
        methods: {
            signup() {
                //判断用户名不为空,和空格
                if (this.form.username == "" || this.form.username.trim() == "") {
                    alert("用户名不能为空");
                    return;
                }
                //密码不能有空格
                if (/\s/.test(this.form.password)) {
                    alert("密码中不能包含空格");
                    return;
                }
                //判断两次输入密码是否一致
                if (this.form.password != this.checkpassword) {
                    alert("两次密码不一致");
                    return;
                }
                axios.post("/signup",this.form).then(function (response) {
                    return response.data;
                })
                alert("注册成功");
                //将form中的值清空
                this.form.username = "";
                this.form.password = "";
                this.checkpassword = "";
                this.form.nick = "";
                this.form.email = "";
                this.form.phone = "";

                window.location.href = "/login.html";
            }
        }
    })
</script>

</html>